<template>
  <div>
    <div class="mb22">
      <Title title="账号信息" style="margin:0px 0 10px 0;"/>
      <el-form
        :class="{'mobile-el-form': showMobilePage}"
        :label-position="showMobilePage?'left':'right'"
        label-width="110px"
        class="abandon-form height55">
        <el-row :gutter="20" :class="{'dividing': !showMobilePage}">
          <el-col :span="8">
            <el-form-item label="平台:">
              <div class="flex">
                <PlatformIcon :data="data.platformName" />
                <ToolTip :content="data.platformName"/>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="主页链接:">
              <ToolTip :content="data.link" :is-can-click="data.link && (data.link.indexOf('http://') === 0 || data.link.indexOf('https://') === 0)" @handelClick="toLink(data.link)"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="账号名称:">
              <div>{{ data.accountName || '--' }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="账号ID:">
              <div>{{ data.accountId || '--' }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="达人所在城市:">
              <div>{{ data.area || '--' }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="标签:">
              <TagSelect v-model="data.tag" mode="detail" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="粉丝量:">
              <div>{{ numFormat(data.fans,true,1,'万') || '--' }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="点赞数:">
              <div>{{ numFormat(data.like,true,1,'万') || '--' }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="评论数:">
              <div>{{ numFormat(data.comment,true,1,'万') || '--' }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收藏数:">
              <div>{{ numFormat(data.collect,true,1,'万') || '--' }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="性别:">
              <div v-if="typeof data.gender === 'number'">{{ data.gender ? '女' : '男' }}</div>
              <div v-else>--</div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div>
      <Title title="价格信息" style="margin-bottom: 16px;" />
      <priceInfo :data="data" />
      <Title title="签约信息" style="margin:0px 0 10px 0;"/>
      <el-form
        :class="{'mobile-el-form': showMobilePage}"
        :label-position="showMobilePage?'left':'right'"
        label-width="110px"
        class="abandon-form height55">
        <el-row :gutter="20" :class="{'dividing': !showMobilePage}">
          <el-col :span="8">
            <el-form-item label="分成说明:">
              <ToolTip :content="data.shareRemark"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="公司分成比例:">
              <div>{{ data.shareRatio ? `${data.shareRatio}%` : '--' }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="达人分成比例:">
              <div>{{ data.talentSharingRatio ? `${data.talentSharingRatio}%` : '--' }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="返点比例:">
              <div>{{ data.returnRatio ? `${data.returnRatio}%` : '--' }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="合作方式:">
              <div>{{ data.cooperation | cooperationStatusFilter }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="签单签约经纪:">
              <CheckUserInfo :user-id="data.agentId" :label="data.agentName" style="margin-right: 4px;" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="签约所属部门:">
              <div>{{ data.department || '--' }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="目前进度:">
              <div>{{ data.schedule | formatScheduleFilter }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="进度备注:">
              <ToolTip :content="data.remark"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="推荐理由:">
              <ToolTip :content="data.reason"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<script>
import Title from '@/components/Title';
import priceInfo from './priceInfo';
import PlatformIcon from '@/components/Common/platformIcon';
import TagSelect from '@/components/Common/tagSelect';
import { cooperationStatusFilter, formatScheduleFilter } from '@/utils/accountCommonData';
import { numFormat, bigDataFilter } from '@/filters/number';
import { mapState } from 'vuex';

export default {
  components: { Title, PlatformIcon, TagSelect, priceInfo },
  filters: { formatScheduleFilter, cooperationStatusFilter, bigDataFilter },
  props: {
    data: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    numFormat,
    toLink(val) {
      window.open(val, '_blank');
    }
  }
};
</script>
<style lang="scss" scoped>
.mb22 {
  margin-bottom: 22px;
}
.dividing{
  &::v-deep {
    .el-col {
      .el-form-item__content {
        border-right: 1px solid #EBEEFD;
      }
      &:nth-child(3n) {
        .el-form-item__content {
          border-right: none;
        }
      }
    }
  }
}
</style>
